<div class="container mx-auto max-w-7xl p-2 lg:px-8 h-full flex flex-col gap-2">
    <div class="title relative mx-auto text-center">
      <h1 class="font-bold text-2xl md:text-3xl pb-2">
        <span>{{ 'PAC.ChatBI.Title' | translate: {Default: 'ChatBI-Data Analysis &amp; Insights with' } }}</span>
        
        <ngm-select class="inline-block border border-dashed rounded-lg" displayDensity="cosy" #mTooltip="matTooltip"
          [placeholder]="hasModel() ? ('PAC.KEY_WORDS.SelectSemanticModel' | translate: {Default: 'Select Semantic Model'}) : ('PAC.ChatBI.NoSemanticModel' | translate: {Default: 'No Semantic Model'})"
          [displayBehaviour]="DisplayBehaviour.descriptionOnly"
          [selectOptions]="sortedModels()"
          [panelWidth]="360"
          valueKey="key"
          [(ngModel)]="modelId"
          [matTooltip]=" 'PAC.KEY_WORDS.SelectSemanticModel' | translate: {Default: 'Select Semantic Model'} "
          matTooltipPosition="right"
          [ngClass]="modelId ? 'border-transparent' : 'border-neutral-300'"
        />

        @if (isMobile() && modelId) {
          <a class="cursor-pointer overflow-hidden text-ellipsis mx-2 whitespace-nowrap"
            [ngClass]="cube() ? '' : 'p-2 rounded-lg border border-dashed border-neutral-500 opacity-50'"
            [matTooltip]=" 'PAC.ChatBI.SelectACube' | translate: {Default: 'Select a Cube'} "
            matTooltipPosition="right"
            (click)="openSelectCube()">
            {{cube() ? cube().caption || cube().name : ('PAC.ChatBI.SelectCube' | translate: {Default: 'Select Cube' })}}</a>
        }
      </h1>
      <p class="text-xs md:text-sm text-zinc-500 dark:text-zinc-300">
        {{ 'PAC.ChatBI.TransformData' | translate: {Default: 'Transform data into insights with AI.' } }}
      </p>
    </div>

    <div class="body w-full flex-1 flex flex-col lg:flex-row-reverse justify-between items-stretch overflow-hidden">
      <pac-chatbi-models class="my-4 w-full min-h-[120px] lg:w-80 rounded-xl bg-white dark:border-zinc-800 dark:bg-neutral-950"
        [ngClass]="isMobile() ? openCubes() ? 'ngm-chatbi-cubes__mobile-opened' : 'ngm-chatbi-cubes__mobile-closed' : ''"
      />

      <pac-chatbi-chat class="flex-1 lg:m-4 lg:flex-1 rounded-xl overflow-hidden grid grid-cols-1
        border-zinc-200 bg-white dark:border-zinc-800 dark:bg-neutral-950"/>
    </div>
</div>

@if (showExplorer()) {
  <ngm-story-explorer class="absolute top-0 left-0 w-full h-full z-20"
    cdkDropListGroup
    [data]="explore()"
    (closed)="closeExplorer($event)"
  />
}